import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const bdwView = defineView({
  controller: class ButtonDropdownsCtrl {
    static $inject = ["$scope", "$element", "$timeout", "$document"];

    isOpen = false;

    targetId = "";

    /**
     * @param {ng.IScope} $scope
     * @param {ng.IAugmentedJQuery} $element
     * @param {ng.ITimeoutService} $timeout
     * @param {ng.IDocumentService} $document
     */
    constructor($scope, $element, $timeout, $document) {
      this.$scope = $scope;
      this.$element = $element;
      this.$timeout = $timeout;
      this.$document = $document;
    }

    $onInit() {
      this.$timeout(() => {
        /**
         * @type {JQuery<HTMLButtonElement>}
         */
        const btnToggle = this.$element.find("button[data-toggle]");
        const targetType = btnToggle.data("toggle");
        /**
         * @type {string}
         */
        this.targetId = btnToggle.data("target");
      });
    }

    /**
     * @param {ng.IAngularEvent} e
     */
    onToggle(e) {
      this.isOpen = true;
    }

    /**
     * @param {Event} $event
     */
    onClose($event) {
      if ($event.target) {
        // if (
        //   /** @type {HTMLElement} */ ($event.currentTarget).tagName === "ul" &&
        //   /** @type {HTMLElement} */ ($event.target).tagName === "li"
        // ) {
        this.isOpen = false;
        // }
      }
    }

    /**
     * @type {JQuery<HTMLButtonElement>}
     */
    get Toggle() {
      return this.$element.find("button[data-toggle]");
    }

    handleClick() {
      console.log("bdwView", this);
    }
  },
  controllerAs: "vm",
  template: /* HTML */ html`
    <!-- Single button -->
    <div class="btn-group">
      ${DebugButtonHTML("vm")}
      <p>
        <button
          type="button"
          class="btn btn-default dropdown-toggle"
          ng-click="vm.onToggle($event)"
          data-toggle="dropdown"
          data-target="#myDropdown"
          ng-attr-aria-haspopup="{{!vm.isOpen}}"
          ng-attr-aria-expanded="{{vm.isOpen}}"
        >
          Action <span class="caret"></span>
        </button>
      </p>
      <ul
        class="dropdown-menu"
        id="myDropdown"
        ng-class="{'block in': vm.isOpen}"
        ng-style="{ display: vm.isOpen ? 'block' : 'none' }"
        ng-click="vm.onClose($event)"
      >
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  `,
});

export default bdwView;
